<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .triangle_border{
            width:200px;
            margin:0 auto 20px;
            position:relative;
            min-height: 100px;
        }
        .triangle_border .popup{
            width:100px;
            background:#fff;
            padding:10px 20px;
            color:#333;
            border-radius:4px;
            position:absolute;
            top:30px;
            left:30px;
            border:1px solid #333;
        }
        .triangle_border .popup span{
            display:block;
            width:0;
            height:0;
            border-width:10px;
            border-style:solid;
            border-color:transparent #333 transparent transparent;
            position:absolute;
            top:8px;
            left:-20px;
        }
        .triangle_border .popup em{
            display:block;
            width:0;
            height:0;
            border-width: 10px;
            border-style:solid;
            border-color:transparent #fff transparent transparent;
            position:absolute;
            top:-10px;
            left:-9px;
        }
    </style>

    <style>
        .box {
            position:relative;
            width:100px;
            height:100px;
            border:1px solid red;
            box-sizing:border-box;
            display: inline-block;
            margin: 30px;
        }

        .box-down:before,
        .box-down:after{
            position:absolute;
            content:" ";
            width:0;
            height:0;
            top:100%;
            border:10px solid transparent;
            left:50%;
            margin-left:-5px;
            pointer-events:none;
        }
        .box-down:before{
            border-top-width:12px;
            border-top-color:red;
            margin-left:-11px;

        }
        .box-down:after{
            border-width:9px;
            border-top-width:10px;
            border-top-color:#fff;
            margin-left:-10px;
        }



        .box-up:before,
        .box-up:after{
            position:absolute;
            content:" ";
            width:0;
            height:0;
            top: -22px;
            border:10px solid transparent;
            left:50%;
            margin-left:-5px;
            pointer-events:none;
        }
        .box-up:before{
            border-bottom-width: 12px;
            border-bottom-color: red;
            margin-left: -11px;

        }
        .box-up:after{
            border-width: 9px;
            border-bottom-width: 10px;
            border-bottom-color:#fff;
            margin-left: -10px;
        }


        .box-up-fill:before {
            position: absolute;
            content: '';
            left: 50%;
            top: -20px;
            border: 10px solid transparent;
            border-bottom-color: red;
            margin-left: -10px;
        }



        .box-up-hollow:before {
            position: absolute;
            content: '';
            left: 50%;
            top: -22px;
            border: 11px solid transparent;
            border-bottom-color: red;
            margin-left: -11px;
        }
        .box-up-hollow:after {
            position: absolute;
            content: '';
            left: 50%;
            top: -20px;
            border: 10px solid transparent;
            border-bottom-color: #fff;
            margin-left: -10px;
        }

    </style>

    <style>
        .position-wrap {
            min-height: 250px;
        }

        .banner {
            background: yellow;
            position: relative;
            padding: 12px;
        }
        .banner-title {
            display: inline-block;
            margin: 0 auto;
            border: 1px solid red;
            padding: 2px 6px;
        }

        .banner-content-wrap {
            position: absolute;
            /*border: 1px solid #d0d0d0;
            border-radius: 4px;*/
            display: none;
        }

        .banner-title:hover + .banner-content-wrap {
            display: block;
        }
        .position-wrap .box {
            margin: 0;
            top: 18px;
            left: 18px;
        }
    </style>

    <style>
        .box-up-shadow {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        .box-up-shadow:before {
            position: absolute;
            content: '';
            width: 14px;
            height: 14px;
            top: -8px;
            left: 50%;
            margin-left: -7px;
            overflow: hidden;
            pointer-events: none;
            transform: rotate(45deg);
            background-color: red;
            box-shadow: -1px -1px 2px rgba(0,0,0,0.5);
        }
        .box-up-shadow:after {
            position: absolute;
            content: '';
            width: 14px;
            height: 14px;
            top: -7px;
            left: 50%;
            margin-left: -7px;
            overflow: hidden;
            pointer-events: none;
            transform: rotate(45deg);
            background-color: #fff;
        }
    </style>

</head>
<body>

<h3>纯 CSS 打造三角箭头指向标识！</h3>

<div class="triangle_border">
    <div class="popup">
        <span><em></em></span>纯CSS写带边框的三角形
    </div>
</div>


<div class="box-wrap">
    <div class="box box-down"></div>

    <div class="box box-up"></div>

    <div class="box box-up-fill"></div>

    <div class="box box-up-hollow"></div>
</div>

<h3>如何给三角箭头加上阴影效果？</h3>
<sub>具体参见：http://blog.csdn.net/swallowliyan/article/details/53639059</sub>

<div class="box-wrap">
    <div class="box box-up-shadow"></div>
</div>

<h3>在 position: absolute 时如何定位实现？</h3>

<div class="position-wrap">
    <div class="banner">
        <span class="banner-title">鼠标移到我身上来~</span>
        <div class="banner-content-wrap">
            <div class="box box-up-hollow">
                我显示出来了！！！
            </div>
        </div>
    </div>
</div>

</body>
</html>